<template>
  <div class="video">
    <img src="../../assets/背景@2x.png" alt="" />
    <div class="info">
      <van-button
        class="back"
        color="linear-gradient(to right,  #F6B433,#FB4A16)"
        @click="$router.push('/')"
      >
        返回首页
      </van-button>
      <div class="product">
        <div class="left"></div>
        <div class="right">
          <div class="title">私密产品1</div>
          <div class="detial">产品详情 <van-icon name="arrow" /></div>
        </div>
      </div>
      <van-button
        class="pay"
        color="linear-gradient(to right,  #FF5BF4,#622CCC)"
      >
        立即购买
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'video'
}
</script>

<style lang="less" scoped>
// 视频
.video {
  width: 100vw;
  height: 100vh;
  position: relative;
  //   全屏
  img {
    width: 100%;
    height: 100%;
  }
  // 下方遮罩信息展示
  .info {
    position: absolute;
    width: 100%;
    height: 267px;
    bottom: 0;
    left: 0;
    background: linear-gradient(360deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.8;
    // 返回首页调整位置
    .back {
      margin-top: 59px;
      padding: 4px 10px;
      width: 68px;
      height: 24px;
      background: linear-gradient(134deg, #f6b433 0%, #fb4a16 100%);
      border-radius: 0px 100px 100px 0px;
      font-size: 12px;
      font-weight: 500;
      color: #fff;
    }

    // 产品信息
    .product {
      padding: 26px 0 26px 16px;
      display: flex;
      .left {
        width: 48px;
        height: 48px;
        background-color: #622ccc;
        border-radius: 8px;
        margin-right: 10px;
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #ffffff;
        font-size: 16px;
        .title {
          line-height: 24px;
          height: 24px;
        }
        .detial {
          font-size: 12px;
          height: 18px;
          font-weight: 400;
          line-height: 18px;
          color: #d9d9d9;
          .van-icon {
            vertical-align: middle;
          }
        }
      }
    }
  }
}
</style>
